<template>
  <div style="display: flex; flex-direction: column;">
    <div class="panel-title">
      <span class="panel-title-text">{{current_category.title}}</span>
      <button  v-show="!editor_show" @click="onInitTask" class="btn">+ 新任务</button>
      <button  v-show="editor_show" @click.stop="editor_show = false" class="btn negative">取消</button>
    </div>
    <task-editor
      :btns="{'new': 1}"
      :task_info="task_info"
      :visible="editor_show"
      @close="editor_show = false"
      @submit="(f) => { task_info=f; onEditTask() }"
    >
    </task-editor>
    <ul class="todo-list">
      <li v-for="(item, index) in todo_list" :key="item.id" :class="[item.done ? 'todo-done' : null ]" >
        <div class="todo-title"  @click="onOpenTask(item)">
          <span class="todo-title-main" > <i class="done-icon" v-if="item.done" @click.stop="onDoneTask(item, index, false)"></i>
            <i class="todo-icon" v-else @click.stop="onDoneTask(item, index, true)" ></i>
            <span class="todo-title-text">{{item.title}}</span>
            <span v-if="!item.done  && item.dt_to > Date.now()" class="todo-last-time" >{{item.to_now }}</span>
              <span v-if="!item.done && item.dt_to < Date.now()" class="todo-pass-time" >{{item.to_now }}过期</span>
          </span>
        </div>
        <div class="todo-content"  @click="onOpenTask(item)" >{{item.content}}</div>
        <div class="todo-time">
          {{item.weekday}} {{item.dt_to | slimdatetime}}
        </div>
        <task-editor
          :btns="{'edit': 1, 'finish': 1}"
          :task_info="task_info"
          :visible="task_info.id == item.id"
          @finish="onDoneTask(item, index, !item.done)"
          @close="task_info.id = 0"
          @submit="(f) => { task_info=f; onEditTask() }"
          @delete="onDelTask(index)"
        >
        </task-editor>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from 'moment'
import db from '@/modules/common/db.js'
import TaskEditor, {TASK_INFO} from '@/modules/home/TaskEditor'
import {updateTimeline} from '@/modules/home/TaskTimeline'
moment.locale('zh-cn')
const weekdays = [
  '', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'
]

export default {
  name: 'TaskList',
  props: ['current_category'],
  components: {
    'task-editor': TaskEditor
  },
  data () {
    return {
      editor_show: false,
      task_info: {
        ...TASK_INFO
      },
      todo_list: []
    }
  },
  watch: {
    current_category: function (n) {
      this.onOpenCategory(n)
    }
  },
  mounted () {

  },
  methods: {
    onDoneTask: function (item, index, b) {
      item.done = b
      let d = this.todo_list.splice(index, 1)
      // if (b) {
      //   this.todo_list.push(d[0])
      // } else {
      //   this.todo_list.unshift(d[0])
      // }
      db.set('todo_list#' + this.current_category.id, this.todo_list)
      updateTimeline(d[0])
    },
    onDelTask: function (index) {
      if (confirm('确定删除吗?')) {
        let d = this.todo_list.splice(index, 1)
        db.set('todo_list#' + this.current_category.id, this.todo_list)
        d[0].delete = true
        updateTimeline(d[0])
      }
    },
    onOpenCategory: function (c) {
      let td = db.get('todo_list#' + c.id, [])
      for (let i in td) {
        td[i].index = i
        td[i].weekday = weekdays[moment(td[i].dt_to).weekday()]
        td[i].to_now = moment(td[i].dt_to).fromNow()
      }
      this.todo_list = td
    },
    onOpenTask: function (t) {
      if (this.task_info.id === t.id) {
        this.task_info.id = 0
        return
      }
      this.editor_show = false
      this.task_info = {
        ...t,
        dt_fr_da: moment(t.dt_fr).format('YYYY-MM-DD'),
        dt_fr_tm: moment(t.dt_fr).format('HH:mm:00'),
        dt_to_da: moment(t.dt_to).format('YYYY-MM-DD'),
        dt_to_tm: moment(t.dt_to).format('HH:mm:00')
      }
    },
    onInitTask: function () {
      this.task_info = {
        ...TASK_INFO
      }
      this.editor_show = true
    },
    onEditTask: function () {
      if (!this.current_category.id) {
        return alert('请选择任务分类')
      }
      console.log({...this.task_info})
      let n = {
        ...this.task_info,
        dt_fr: moment(this.task_info.dt_fr_da + ' ' + this.task_info.dt_fr_tm, ['YYYY-MM-DD HH:mm', 'YYYY-M-D H:m']).valueOf(),
        dt_to: moment(this.task_info.dt_to_da + ' ' + this.task_info.dt_to_tm, ['YYYY-MM-DD HH:mm', 'YYYY-M-D H:m']).valueOf(),
        id: Date.now()
      }
      if (this.task_info.id) {
        this.todo_list[this.task_info.index] = n
      } else {
        this.todo_list.unshift(n)
        updateTimeline(n)
      }
      db.set('todo_list#' + this.current_category.id, this.todo_list)
      this.editor_show = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.todo-icon::after {
  content: "□";
  font-size: 24px;
  font-weight: bold;
  margin-right: 4px;
}

.done-icon::after {
  content: "■";
  font-size: 24px;
  font-weight: bold;
  margin-right: 4px;
}

.todo-list {
  font-size: 16px;
  /* font-weight: bold; */
  padding: 20px;
  /* min-height: 600px; */
}

.todo-list li {
  text-align: left;
  border-radius: 8px;
  border: 1px solid #EEE;
  padding: 8px 10px;
  background: #FFF;
  margin: 5px auto;
}
.todo-list li:hover {
  background: #fdffea;
  cursor: pointer;
}

li.todo-done{
  background: #FAFAFA;
}
.todo-title {
  display: flex;
}
.todo-title-main {
  flex: 1;
}
.todo-done .todo-title-text {
  text-decoration: line-through;
}

.todo-content {
  font-size: 14px;
  font-weight: normal;
  color: #888;
}

.todo-time {
  font-size: 14px;
  font-weight: normal;
  /* color: #888; */
}

.todo-last-time {
  font-size: 16px;
  color: red;
}
.todo-pass-time {
  font-size: 16px;
  color: gray;
}
</style>
